<template>
  <div class="header1">
    <div class="header1-left" v-if="true">
      <van-image class="header1-avatar" round width="0.35rem" height="0.35rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      <div class="header1-left-content">
        <div>{{ $t('header.title') }}</div>
        <div>{{ $t('header.subtitle') }}</div>
      </div>
    </div>
    <div class="header1-left" v-else>
      <div class="back-btn">

      </div>
      <div class="back-btn-text">
        BACK
      </div>
    </div>
    
    <div class="header1-right">
      <div class="right-block"> 
        <van-image class="header1-avatar" round width="0.25rem" height="0.25rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <span>234.00</span>
      </div>
      <div class="right-block"> 
        <van-image class="header1-avatar" round width="0.25rem" height="0.25rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <span>234.00K</span>
      </div>
      <div class="right-block"> 
        <van-image class="header1-avatar" round width="0.25rem" height="0.25rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <span>234.00</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// defineProps<{ 
//   msg: string 
// }>();
</script>

<style scoped lang="less">
.header1 {
  height: 0.4rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.05rem 0.1rem;
  .header1-left{
    display: flex;
    .header1-avatar{
      border: 2px solid black;
    }
    .header1-left-content{
      margin-left: 0.05rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .back-btn{
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 0.35rem;
      background-color: aqua;
    }
    .back-btn-text{
      line-height: 0.35rem;
      margin-left: 0.03rem;
    }
  }
  .header1-right{
    // width: 1.8rem;
    
    height: 100%;
    background-color: rgb(228, 224, 219);
    border-radius: 0.9rem;
    display: flex;
    justify-content: space-between;
    .right-block{
      padding: 0rem 0.05rem;
      display: flex;
      align-items: center;
      span{
        margin-left: 0.03rem;
      }
    }
  }
}
</style>